<template>
	<view>
		<component class="com" :is="componentName" :width="width" :url="mediaUrl"></component>
	</view>
</template>

<script>
	export default {
		name: "w-media",
		props: {
			width: {
				type: [String, Number],
				default: 200
			},
			product: {
				type: Object,
				defaul() {
					return {
						'3d_url_type': 'img',
						"3d_url": '',
						batch: {},
						issuer: {},
						series: {},
					}
				}
			}
		},
		computed: {
			mediaUrl() {
				switch (this.product['3d_url_type']) {
					case 'img':
						return this.$ossUrl + this.product.main_image;
					default:
						return this.$ossUrl + this.product['3d_url'];
				}
			},
			componentName() {
				let type = this.product['3d_url_type'];
				let typeMap = {
					img: "media-img",
					"3d": 'media-3d',
					"mp4": 'meida-video'
				}
				return typeMap[type];
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.com {
		// border: 6rpx solid #FFFFFF;
		// border-radius: 16rpx;
		background-image: url($IMG_URL + '/static/bg/goods-border.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		width: 100%;
		height: 100%;
		padding: 54rpx;
		box-sizing: border-box;
	}
</style>